<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="m.css">
</head>
<body>
    <div id="wo">
        <hl class="a">留言板</hl>
        <ul class="l"></ul>
        <script>
            var btn = document.querySelector('.sub');
            var text = document.querySelector('textarea');
            var ul = document.querySelector('ul');
            //注册事件
            btn.onclick = function(){
                if (text.value == '') {
                    alert('你没有输入内容');
                    return false;
                } else{
                    var li = document.createElement('li');
                    li.innerHTML = text.value;
                    var button = document.createElement('button');
                    button.className = 'remove';
                    button.innerHTML = '删除'
                    button.onclick = function(){
                        ul.removeChild(this.parentNode);
                    };
                    li.appendChild(button);
                    ul.insertBefore(li, ul.children[0]);
                    text.value = '';
                }
            };
        </script>
        <textarea placeholder="请编辑你的留言" class="v"></textarea>
        <button class="sub">发布</button>
    </div>

</body>
</html>